<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> 
     <div id="app">
      <div>
        <h1>{{num | f2 | c5}}</h1>
        <h1>{{price | f2}}</h1>

        <h1>订单状态：{{status | orderCode}}</h1>
      </div>
     </div>
     <script src="./vue.js"></script>
     <script>
  // vue的过滤器  用管道写法 | 处理渲染的数据的
      // fucntion (){}  ---->   ()=>{}
      // Vue.filter('过滤器的名字',()=>{
      // })
      // 全局过滤器  保留俩位小数点的过滤器
      Vue.filter("f2",(val)=>{
        // val---过滤器前面的值
        return val.toFixed(2) //保留俩位小数点
      })
      // 过滤器 让数据  ×5
      Vue.filter("c5",(val)=>{
          return val*5
      })  

         new Vue({
          el:"#app",
          data(){
            return {
               num:12424.4564998,
               price:1231.4456456,
               status:5 //订单状态
            }
          },
          filters:{ //局部过滤器
             orderCode:(val)=>{
               if(val===1){
                 return "未付款"
               }else if(val===2){
                  return "已付款"
               }else if (val===3){
                  return "已发货"
               }else if(val===4){
                  return "已收货"
               }else if(val===5){
                  return "已评价"
               }
             }
          }
         })


     </script>
</body>
</html>